<template>
	<view class="profile-settings">
		<up-cell-group class="profile-settings-group" :border="false">
			<up-cell :title="$t('profile.settings.enterprise')">
				<template #value>
					<up-input v-model="userInfo.companyName" inputAlign="right" border="none"></up-input>
				</template>
			</up-cell>
			<up-cell :title="$t('profile.settings.name')">
				<template #value>
					<up-input v-model="userInfo.nickName" inputAlign="right" border="none"></up-input>
				</template>
			</up-cell>
			<up-cell :title="$t('profile.settings.nicaname')">
				<template #value>
					<up-input readonly :modelValue="sotre.userInfo?.username" inputAlign="right"
						border="none"></up-input>
				</template>
			</up-cell>
			<up-cell :border="false" :title="$t('profile.settings.phone')">
				<template #value>
					<up-input v-model="userInfo.phoneNumber" inputAlign="right" border="none"></up-input>
				</template>
			</up-cell>
		</up-cell-group>
		<view class="profile-settings-actions">
			<up-button type="primary" size="large" shape="circle"
				@tap="handleSubmit">{{$t('profile.settings.submit')}}</up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		useAppStore
	} from "@/store/app";
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n();

	const sotre = useAppStore();
	const userInfo = reactive({
		companyName: sotre.userInfo?.companyName,
		nickName: sotre.userInfo?.nickName,
		phoneNumber: sotre.userInfo?.phoneNumber
	});

	const verifyFields = () => {
		let countryCode = "";
		let phoneNumber = "";

		if (userInfo.phoneNumber.includes("-")) {
			[countryCode, phoneNumber] = userInfo.phoneNumber.split("-");
		} else {
			phoneNumber = userInfo.phoneNumber;
		}
		if (!userInfo.companyName) {
			return t('enrollPage.pleaseEnterTheCompany');
		} else if (!userInfo.nickName) {
			return t('enrollPage.pleaseEnterYourRealName');
		} else if (userInfo.phoneNumber && countryCode && !/^\+\d{1,3}$/.test(countryCode)) {
			return t('enrollPage.invalidCodeFormat');
		}else if (userInfo.phoneNumber && !/^\d+$/.test(phoneNumber)) {
			return t('ops.create.warn-3');
		}
		return null;
	}

	const handleSubmit = async () => {
		const errorMessage = verifyFields();
		if (errorMessage) {
			uni.$u.toast(errorMessage);
			return;
		}
		await sotre.updateUserInfo(userInfo);
		uni.navigateBack();
	}
</script>

<style lang="scss">
	.profile-settings {
		&-group {
			margin: 20rpx 32rpx;
			padding: 0 32rpx;
			background-color: #132034;
			border-radius: 16rpx;

			& :deep(.u-cell__body) {
				padding: 40rpx 0;
			}

			& :deep(.u-cell__title-text) {
				font-size: 32rpx;
				line-height: 1;
				letter-spacing: 0.014499999999999999em;
				color: #AEAEAE;
			}

			& :deep(.u-input__content__field-wrapper__field) {
				font-size: 32rpx !important;
				font-weight: normal;
				line-height: 1;
				letter-spacing: 0.014499999999999999em;
				color: #DDDDDD !important;
			}

			& :deep(.u-line) {
				border-bottom-color: #08121E !important;
			}
		}

		&-actions {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 60rpx 56rpx;
		}
	}
</style>